<template>
  <div class="" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <br>
    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
          <div class="col-12 p-0">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 店铺信息</p>
          </div>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="桌位管理" name="first">
              <div class="row mt-4">
                <div class="col-3">
                  <button class="btn btn-primary">新增桌位</button>
                  <button class="btn btn-light">批量新增</button>
                  <button class="btn btn-outline-danger ">批量删除</button>
                </div>
                <div class="col-9">
                  <div class="col-12 form-inline">

                    <span>所属区域：</span>
                    <select name=""  class="form-control col-2 mr-5">
                      <option value="">全部</option>
                    </select>

                    <span class="">所属区域：</span>
                    <select name="" id="" class="form-control col-2">
                      <option value="">全部</option>
                    </select>

                    <div class="input-group ml-5">
                      <input type="text" class="form-control" placeholder="输入桌位编号搜索" aria-label="Recipient's username" aria-describedby="button-addon2">
                      <div class="input-group-append">
                        <button class="btn btn-outline-primary" type="button" id="button-addon2"><i class="bi bi-search"></i> 搜索</button>
                      </div>
                    </div>

                  </div>
                </div>
                <div class="col-12 mt-5">
                  <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                      <th>桌位编号</th>
                      <th>桌位名称</th>
                      <th>所属区域</th>
                      <th>人数区间</th>
                      <th>状态</th>
                      <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr v-for="(item, index) in seatInfo.list" v-bind:key="index">
                      <td>{{ item.id }}</td>
                      <td>{{ item.name }}</td>
                      <td>{{ item.regionId }}</td>
                      <td>1~{{ item.maxNumber }}</td>
                      <td>
                        <el-switch v-model="item.status==1" />
                      </td>
                      <td>
                        <a href="">编辑</a>
                        <a href="">删除</a>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  <nav aria-label="Page navigation example">
                    <ul class="pagination">
                      <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                          <span aria-hidden="true">&laquo;</span>
                        </a>
                      </li>
                      <li class="page-item"><a class="page-link" href="#">1</a></li>
                      <li class="page-item"><a class="page-link" href="#">2</a></li>
                      <li class="page-item"><a class="page-link" href="#">3</a></li>
                      <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                          <span aria-hidden="true">&raquo;</span>
                        </a>
                      </li>
                    </ul>
                  </nav>
                </div>
              </div>

            </el-tab-pane>
            <el-tab-pane label="门店信息" name="second">              <div class="row mt-4">
              <div class="col-3">
                <button class="btn btn-primary">新增桌位</button>
                <button class="btn btn-light">批量新增</button>
                <button class="btn btn-outline-danger ">批量删除</button>

              </div>
              <div class="col-9">
                <div class="col-12 form-inline">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入区域名称搜索" aria-label="Recipient's username" aria-describedby="button-addon2">
                    <div class="input-group-append">
                      <button class="btn btn-outline-primary" type="button" id="button-addon2"><i class="bi bi-search"></i> 搜索</button>
                    </div>
                  </div>

                </div>
              </div>


              <div class="col-12 mt-5">
                <table class="table table-striped table-hover">
                  <thead>
                  <tr>
                    <th>排序</th>
                    <th>区域名称</th>
                    <!--                      <th>桌位数量</th>-->
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                  </thead>

                  <tbody>
                  <tr v-for="(item, index) in regionInfo.list" v-bind:key="index">
                    <td>{{item.id}}</td>
                    <td>{{ item.name }}</td>
                    <!--                      <td>{{item.}}</td>-->
                    <td>
                      <el-switch v-model="item.status==1" />
                    </td>
                    <td>
                      <a href="">编辑</a>
                      <a href="">删除</a>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <br>
    <div class="container-fluid mt-5" id="copyright" align="center">
      ——————————————这里是版权——————————————<br><br>
    </div>
    <br>

  </div>



</template>

<script>
    import service from "../utils/axios";

    export default {
        name: "TableManage",
      data() {
        return {
          activeName: 'first',
          switch_table: true,
          value1: true,

          seatInfo: {
            name: "",
            id: "",
            regionId: "",
            status: 1,
            pageNum: 1,
            list: {}
          },
          regionInfo: {
            name: "",
            pageNum: 1,
            list: {}
          }
        }
      },
      methods: {
        querySeatList(pageNum){
          service.get("/seatInfo/queryList",{
            params:{
              "pageNum": this.seatInfo.name,
              "name": this.seatInfo.name,
              "id": this.seatInfo.id,
              "regionId": this.seatInfo.regionId,
              "status": this.seatInfo.status,
            }
          }).then(data => {
            this.seatInfo.list = data.data.data.list
            this.seatInfo.pageNum = data.data.data.pageNum
          })
        },
        queryRegionList(pageNum){
          service.get("/regionInfo/queryList",{
            params:{
              "pageNum": this.seatInfo.name,
              "name": this.seatInfo.name
            }
          }).then(data => {
            this.regionInfo.list = data.data.data.list
            this.regionInfo.pageNum = data.data.data.pageNum
          })
        }
      },
      created() {
          this.querySeatList(1);
          this.queryRegionList(1);
      }
    }
</script>

<style scoped>

</style>
